<template lang="pug">
.list
  .list-add-btn
    el-button(type="primary" size="small" @click="add") 添加图片册
  .list-header
    .list-header-filter
      header-filter(:filter="filter")
  .list-body
    .list-table
      el-table(
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'fontSize': '14px', 'background': '#F7F7F7', 'color': '#363636'}"
      )
        el-table-column(type="selection" align="center" width="55px")
        el-table-column(label="编号" prop="albumId" sortable)
        el-table-column(label="图片册名称" prop="albumName")
        el-table-column(label="封面" prop="mobile")
          template(slot-scope="scope")
            .table-item-cover(:style="`background-image: url(${scope.row.fileUrl})`")
        el-table-column(label="图片数量" prop="photoTotal")
        el-table-column(label="排序" prop="albumSort" sortable)
        el-table-column(label="描述" prop="albumDesc")
        el-table-column(label="操作")
          template(slot-scope="scope")
            .table-item-handle(@click="seeDetail(scope.row)") 查看
            .table-item-handle(@click="edit(scope.row)") 编辑
            .table-item-handle(@click="deleteMember(scope.row)") 删除
      .index-pagination
        .pagination-total 共 {{total}} 条
        .pagination-sizes 10 条/页
        el-pagination(
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        )
</template>

<script>
import headerFilter from '@/components/headerFilter'
import { getImageList, saveOrUpdatePhoto } from 'api'
export default {
  name: 'imageList',
  components: {
    headerFilter
  },
  data () {
    return {
      filter: [
        [
          {
            name: '材料名称：',
            type: 'default',
            key: 'albumName',
            albumName: '',
          },
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: [],
      total: 0,
      pageSize: 10,
      page: 1
    }
  },
  methods: {
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      Object.keys(query).forEach(v => {
        if (!query[v]) delete query[v]
      })
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    reset () {
      this.$router.replace({ name: this.$route.name })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          v[v.key] = this.$route.query[v.key] || ''
        }))
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    add () {
      this.$router.push({ name: 'imageEdit' })
    },
    handleSelectionChange () {},
    seeDetail (row) {
      this.$router.push({ name: 'photoList', params: { id: row.albumId } })
    },
    edit (row) {
      this.$router.push({ name: 'imageEdit', params: { id: row.albumId } })
    },
    deleteMember (row) {
      this.$confirm('是否删除该图片册？', '提示').then(async () => {
        try {
          await this.$axios.post(saveOrUpdatePhoto, { content: { albumId: row.albumId, isDelete: true } })
          this.getList()
        } catch (err) {
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getImageList, { content: { ...query } })
        this.page = parseInt(this.$route.query.currentPage)
        this.list = ResultSet.userData.PhotoAlbumList
        this.total = ResultSet.recordNumber || 0
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
}
</script>

<style lang="scss" scoped>
.list {
  padding: 0 32px 16px;
  height: 100%;
}
.list-add-btn {
  margin-bottom: 16px;
}
.list-header {
  padding: 32px 24px 16px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-body {
  margin-top: 16px;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-table {
  margin-top: 16px;
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.table-item-handle {
  display: inline-block;
  padding: 0 8px;
  line-height: 1;
  cursor: pointer;
  color: #FF2E42;
}
.table-item-cover {
  width: 80px;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>